<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div>
      <!-- 文本节点 -->
      <div id="app">
        我是div
        <li>
          <span><p>fdsafdsafdsa{{message}}fdafdas</p></span>
        </li>
      </div>
    </div>

    <script>
      //简易响应式
      //1.可以替换字符串中的大胡子语法{{}}
      //2.可以查找多层级的dom元素
      //获取指定区域内的字符串
      //可以通过获取节点的形式获取字符串

      var data = {
        message: "测试数据",
      };

      var appEle = document.querySelector("#app"); //查找的范围

      compare(appEle);
      function compare(appEle) {
        //获取所有的子节点
        var childNodes = appEle.childNodes;
        // 循环所有的节点 找到文本节点类型
        childNodes.forEach(function (node) {
          // console.log(node);
          if (node.nodeType === 3) {
            //3 是文本节点
            // console.log("文本节点是", node.nodeValue);
            var str = node.nodeValue;
            //需要在fdsafdsafdsa{{message}}fdafdas里面查找{{}}  然后再做替换操作
            var reg = /\{\{([^{}]+)\}\}/g; //括号进行分组
            //通过正则表达式查找{{}}
            if (reg.test(str)) {
              // console.log("有{{}}语法");
              var $1 = RegExp.$1; //$x表示正则表达式里面第x个括号包含的内容
              // console.log("匹配到分组的内容是", $1);
              node.nodeValue = node.nodeValue.replace(reg, data[$1]); //做替换 把元素节点里面的值切换为data里面的message值
            }
          } else if (node.nodeType === 1) {
            //如果获取到的不是文本节点就一直执行compare函数
            compare(node);
          }
        });
      }
    </script>
  </body>
</html>
